
import React, { useState, useEffect } from 'react'
import { Layout, Menu, Row, Col, Progress, InputNumber, Button } from 'antd'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import btcIcon from '../../assets/img/icon/btc.png'
import ethIcon from '../../assets/img/icon/eth.png'
import ipfsIcon from '../../assets/img/icon/ipfs.png'
import usdtIcon from '../../assets/img/icon/usdt.png'
import feeIcon from '../../assets/img/icon/fee.png'
import cardIcon from '../../assets/img/icon/card.png'
import soldIcon from '../../assets/img/sold.png'
import classicIcon from '../../assets/img/classic.png'
import fastIcon from '../../assets/img/fast.png'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss'

const { Content } = Layout

function Miner(props) {
    const coinList = [
        { name: 'BTC', icon: btcIcon },
        { name: 'ETH', icon: ethIcon },
        { name: 'IPFS', icon: ipfsIcon },
        { name: '电费包', icon: feeIcon },
    ]

    const [minerList, setMinerList] = useState([
        { day: 180, percent: 43, type: fastIcon },
        { day: 480, percent: 100, type: fastIcon },
        { day: 720, percent: 83, type: classicIcon }
    ])

    const [payList, setPayList] = useState([
        { name: 'BTC', icon: btcIcon },
        { name: 'ETH', icon: ethIcon },
        { name: 'IPFS', icon: ipfsIcon },
        { name: 'USDT', icon: usdtIcon },
        { name: 'CARD', icon: cardIcon },
    ])
    const [menuIndex, setMenuIndex] = useState('0')
    const coinItem = (value, index) => {
        return (<Menu.Item className="miner-menu-item" key={index}>
            <img src={value.icon} />
            {value.name}
        </Menu.Item>)
    }

    const selectMiner = id => {
        props.history.push({ pathname: `/minerDetail/${id}` })
    }

    const powrItem = (value, index) => {
        return (
            <Col key={index} md={7} sm={10} xs={20}>
                <div className="miner-item" onClick={() => selectMiner(index)}>
                    <Row className="title" justify="center" align="middle">
                        <h3>蚂蚁矿机S19套餐</h3>
                    </Row>
                    <Row className="day" justify="center">
                        <span>480 天</span>
                        <span>50 TH/S</span>
                    </Row>
                    <Row justify="center">
                        <small>电费单价 / THS / 天</small>
                    </Row>
                    <Row justify="center" className="price">
                        $ <big>0.0538</big>
                    </Row>
                    <Row justify="space-between" className="desc">
                        <Col>
                            <p className="title">合约周期</p>
                            <p>{value.day}天</p>
                        </Col>
                        <Col>
                            <p className="title">管理费用</p>
                            <p>0</p>
                        </Col>
                        <Col>
                            <p className="title">交付日期</p>
                            <p>立即交付</p>
                        </Col>
                    </Row>
                    <Row justify="space-between">
                        <Col span={17}>
                            <Progress percent={value.percent} showInfo={false} strokeColor="#F8B657" strokeLinecap="square" />
                        </Col>
                        <Col className="text-right">
                            <small> 已售：{value.percent}%</small>
                        </Col>
                    </Row>
                    <Row className="input-row">
                        <InputNumber className="input-num" min={1} max={10} />
                        <span className="input-sub">THS</span>
                    </Row>
                    <Row>
                        <Button className="buy-btn" type="primary">立即购买 | $ 6209.00</Button>
                    </Row>
                    <Row className="award" justify="center">
                        <span>静态收益率：136.37%</span>
                    </Row>
                    <Row>
                        <Col span={5}>
                            <small> 支付方式:</small>
                        </Col>
                        <Col>
                            {
                                payList.map((value, index) => {
                                    return <img className="pay-icon" src={value.icon} />
                                })
                            }
                        </Col>
                    </Row>
                    <div className="status"><img src={value.type} /></div>
                    {/* {value.percent === 100 && <div className="sold"><img src={soldIcon} /></div>} */}
                </div>
            </Col>
        )
    }

    return (
        <Layout className="layout miner">
            <HeaderBox />
            <Content>
                <Menu className="miner-menu" mode="horizontal" selectedKeys={[menuIndex]}>
                    <Menu.Item className="miner-menu-item"> 全部产品</Menu.Item>
                    {
                        coinList.map((value, index) => {
                            return coinItem(value, index)
                        })
                    }
                </Menu>
                <section>
                    <Row className="miner-list main" justify="space-around">
                        {
                            minerList.map((value, index) => {
                                return powrItem(value, index)
                            })
                        }
                    </Row>
                </section>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Miner